<template>
    <el-form ref="ruleFormRef" :model="ruleForm" label-width="auto" :size="formSize" status-icon label-position="top">
        <h1 style="font-size: 2rem;text-align: center;color: #000;">施 工 日 记 </h1>
        <div class="text-right" style="color: #000;">日期：{{ruleForm.date}} </div>
        <el-table class="mt20" :data="tableData" border  :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }" style="width: 100%;font-size: 16px;height: auto !important;margin: 0px;">
            <el-table-column prop="title" label="昼夜" align="center" />
            <el-table-column label="天气状况" align="center">
                <template #default="scope">
                    <div v-if="scope.$index == 0"><el-text>{{ ruleForm.day_weather }}</el-text></div>
                    <div v-else><el-text>{{ ruleForm.night_weather }}</el-text></div>
                </template>
            </el-table-column>
            <el-table-column label="风力" align="center">
                <template #default="scope">
                    <div v-if="scope.$index == 0"><el-text>{{ ruleForm.day_wind }}</el-text></div>
                    <div v-else><el-text>{{ ruleForm.night_wind }}</el-text></div>
                </template>
            </el-table-column>
            <el-table-column label="最低/最高温度" align="center">
                <template #default="scope">
                    <div v-if="scope.$index == 0"><el-text>{{ ruleForm.day_temperature }}</el-text></div>
                    <div v-else><el-text>{{ ruleForm.night_temperature }}</el-text></div>
                </template>
            </el-table-column>
            <el-table-column label="备注" align="center">
                <template #default="scope">
                    <div v-if="scope.$index == 0"><el-text>{{ ruleForm.day_remarks }}</el-text></div>
                    <div v-else><el-text>{{ ruleForm.night_remarks }}</el-text></div>
                </template>
            </el-table-column>
        </el-table>
        <UniformDescriptions :column="5" border direction="vertical" >
            <el-descriptions-item class="custom-bg" label="现场施工记录" :span="5">
                <el-form-item>
                    <div><el-text>{{ ruleForm.work_content }}</el-text></div>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="技术质量安全情况记录" :span="5">
                <el-form-item >
                    <div><el-text>{{ ruleForm.quality_safety }}</el-text></div>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="材料、构件进场" :span="5">
                <el-form-item >
                    <div><el-text>{{ ruleForm.materials }}</el-text></div>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="尚待解决" :span="5">
                <el-form-item >
                    <div><el-text>{{ ruleForm.problems }}</el-text></div>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="备注" :span="5">
                <el-form-item >
                    <div><el-text>{{ ruleForm.remarks }}</el-text></div>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="现场照片" :span="5">
                <el-form-item >
                    <el-button type="primary" @click="onShowFile(ruleForm.files)" >查看</el-button>
                </el-form-item>
            </el-descriptions-item>
        </UniformDescriptions>
    </el-form>
    <el-divider />

    <el-dialog v-model="isShowFile" title="文件" width="80%" @close="onCloseFile">
        <component :is="showFileArr" :data="files"/>
    </el-dialog>

</template>
  
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { ElLoading, type ComponentSize, type FormInstance } from 'element-plus'
import UniformDescriptions from '@/components/UniformDescriptions.vue'
import showFileArr from '@/components/showFileArr.vue'
import http from '../util/request';
const files = ref<string[]>([])
const isShowFile = ref<boolean>(false)

const tableData = ref<any>([])
const id = ref<string>('')
interface RuleForm {
    id:number
    date: string
    day_weather:string
    day_temperature:string
    day_wind:string
    night_weather:string
    night_temperature:string
    night_wind:string
    work_content: string
    progress: string
    quality_safety: string
    materials: string
    problems: string
    day_remarks:string
    night_remarks:string
    remarks: string
    files: string
}

const formSize = ref<ComponentSize>('large')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    id:0,
    date: '',
    day_weather:'/',
    day_temperature:'/',
    day_wind:'/',
    night_weather:'/',
    night_temperature:'/',
    night_wind:'/',
    work_content: '/',
    progress: '/',
    quality_safety: '/',
    materials: '/',
    problems: '/',
    day_remarks:'/',
    night_remarks:'/',
    remarks: '/',
    files: '',
})


const getData = () => {
    ruleForm.value.id = 0
    ruleForm.value.date = ''
    ruleForm.value.day_weather = ''
    ruleForm.value.day_temperature = ''
    ruleForm.value.day_wind = ''
    ruleForm.value.night_weather = ''
    ruleForm.value.night_temperature = ''
    ruleForm.value.night_wind = ''
    ruleForm.value.work_content = ''
    ruleForm.value.progress = ''
    ruleForm.value.quality_safety = ''
    ruleForm.value.materials = ''
    ruleForm.value.problems = ''
    ruleForm.value.day_remarks = ''
    ruleForm.value.night_remarks = ''
    ruleForm.value.remarks = ''
    ruleForm.value.files = ''
    
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    
    http.get('/construction/diary/id/'+id.value).then((response:any)=>{
        loading.close()
        if(response.data.data){
            ruleForm.value = response.data.data
            tableData.value = [
                {
                    weather:ruleForm.value.day_weather,
                    temperature:ruleForm.value.day_temperature,
                    wind:ruleForm.value.day_wind,
                    remarks:ruleForm.value.day_remarks,
                    title:'白天',
                },
                {
                    weather:ruleForm.value.night_weather,
                    temperature:ruleForm.value.night_temperature,
                    wind:ruleForm.value.night_wind,
                    remarks:ruleForm.value.night_remarks,
                    title:'夜间',
                },
            ];
        }
    })
}

const props = defineProps<{
    data:any
}>()

watch(props,()=>{
    id.value = props.data
    getData()
},{ immediate: true })

const onCloseFile = () => {
    files.value = []
}

const onShowFile = (file:string) => {
    if(files){
        files.value = file.split(',')
    }
    isShowFile.value = true
}

onMounted(()=>{
    getData()
})

</script>
<style scoped>
.el-form{margin:0px auto;width: 800px;}

/* 全局移除 el-input 边框 */
.no-border-input {
/* 覆盖 Element Plus 的 CSS 变量 */
	--el-input-border-color: transparent;
	--el-input-focus-border-color: transparent;
	--el-input-hover-border-color: transparent;
}

/* 配合移除阴影 */
:deep(.no-border-input .el-input__inner) {
	box-shadow: none;
}
</style>
